<template>
  <div class="detail-container" style="width:100%;margin:0 auto;height:calc(100vh - 65px);overflow-y: auto;padding-bottom:80px;">
    <el-card shadow="never"  class="detail-form">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前状态：{{ form.planState | fifplanState}}</span>
      </div>
      <el-form size="mini" label-width="150px" style="margin-top:20px" ref="form"  :model="form">
        <div style="margin: 20px 0 20px 0">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">基本信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="排货编号：" style="margin-bottom:0px;">
              {{form.billSn}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排货类型：" style="margin-bottom:0px;">
              {{form.billType | fifBillType}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售合同：" style="margin-bottom:0px;">
              {{form.saleOrderSn}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户编号：" style="margin-bottom:0px;">
              {{form.customerNumber}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称：" style="margin-bottom:0px;">
              {{form.customerName}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收货地址：" style="margin-bottom:0px;">
              {{form.receiverAddress}} <span style="padding-left:15px">{{ form.receiverName }}/{{ form.receiverMobile }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品信息：" style="margin-bottom:0px;">
              {{form.goodsInfo}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table
              :data="form.newOrderRemark"
              border
              style="width:500px;">
              <el-table-column
                label="订单号"
                min-width="150"
                align="center"
                prop="orderSn">
              </el-table-column>
              <el-table-column
                label="支付摘要"
                min-width="300"
                align="center">
                  <template slot-scope="{row}">
                    <div style="color:red">{{ row.orderRemark }}</div>
                  </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <div style="margin: 20px 0 20px 0;clear: both">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">提货信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="采购单号：" style="margin-bottom:0px;">
                 {{form.purchaseOrderSn}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商：" style="margin-bottom:0px;">
              {{form.supplierName}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
              <el-form-item label="提货仓库：" style="margin-bottom:0px;">
                {{form.takeWarehouse}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="提货时间：" style="margin-bottom:0px;">
              {{form.takeTime}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="提货类型：" style="margin-bottom:0px;">
              {{form.planSendType}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提货地址：" style="margin-bottom:0px;">
              {{form.takeAddress}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人：" style="margin-bottom:0px;">
              {{form.contactName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人手机：" style="margin-bottom:0px;">
              {{form.contactMobile}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库注意事项：" style="margin-bottom:0px;">
                  {{form.takeNote}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发同批次同产线：" style="margin-bottom:0px;">
              {{form.isSameBatch == 1 ? '是' : '否'}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提货商品：" style="margin-bottom:0px;">
              <el-table
                :data="form.takeGoodsList"
                border
                style="width: 100%;">
                <el-table-column
                  label="商品名称"
                  min-width="150"
                  align="center">
                  <template slot-scope="scope">
                    {{scope.row.goodsName}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="包装"
                  min-width="100"
                  align="center">
                  <template slot-scope="scope">
                    {{scope.row.goodsWeight}} kg/包
                  </template>
                </el-table-column>
                <el-table-column
                  label="提货数量"
                  min-width="100"
                  align="center">
                  <template slot-scope="scope">
                    {{scope.row.planNum}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="是否含托"
                  min-width="100"
                  align="center">
                  <template slot-scope="scope">
                    {{scope.row.isHasTray == 1 ? '是' : '否'}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  min-width="150"
                  align="center">
                  <template slot-scope="scope">
                    {{scope.row.goodsRemark}}
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="提货备注：" style="margin-bottom:0px;">
              {{form.takeRemark}}
            </el-form-item>
          </el-col>
        </el-row>

        <div style="margin: 20px 0 20px 0;clear: both">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">司机信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="司机姓名：" style="margin-bottom:0px;">
              {{form.driverName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="司机手机号：" style="margin-bottom:0px;">
              {{form.driverMobile}} <span style="padding-left:20px;"><el-checkbox v-model="checked">显示手机号</el-checkbox></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号：" style="margin-bottom:0px;">
              {{form.driverTruckNo}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号：" style="margin-bottom:0px;">
              {{form.driverIdNumber}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="运满满订单号：" style="margin-bottom:0px;">
              {{form.ymmOrderId}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调度员：" style="margin-bottom:0px;">
              {{form.logisticsUserName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
              <el-col :span="12">
                <el-form-item label="司机信息备注：" style="margin-bottom:0px;">
                  {{form.driverRemark}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="运满满费用：" style="margin-bottom:0px;">
                  {{form.planFreight}}
                </el-form-item>
              </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="是否整车：" style="margin-bottom:0px;">
              {{form.isCompleteCar}}
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-card>

    <div style="margin-top:40px;text-align: center">

      <!--所有按钮-物流-->
      <div style="margin-top:20px;" v-if="userType=='deliver'">
        <!--销售排货-->
        <span v-if="form.billType == 'saleOrder'">
            <span v-if="form.planSendType == '运联发货'">
                <el-button style="margin-left:0" type="primary" size="small"  v-if="form.planState == 0 && formPage != 'sale'" @click="showDialogVisible('物流确认发货')">物流确认发货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 0 || form.planState == 25 || form.planState == 30 || form.planState == 40)&& formPage != 'sale'" @click="showCancelForm">取消排货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 10 && formPage != 'sale'" @click="cancelDeliver">取消发货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30 || form.planState == 40)&& formPage != 'sale'" @click="showDetail2" :disabled="form.planState == 40">修改提货信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30|| form.planState == 40)&& formPage != 'sale'" @click="showDialogVisible('修改司机信息')">修改司机信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30 || form.planState == 40)"  @click="showPrint">打印单据</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 30 && form.isNeedCheck==1 && formPage != 'sale'" @click="showDialogVisible5">确认出库</el-button>
            </span>
            <span v-if="form.planSendType == '工厂发货'">
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30)&& formPage != 'sale'" @click="showCancelForm">取消排货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30 || form.planState == 40)&& formPage != 'sale'" @click="showDetail2" :disabled="form.planState == 40">修改提货信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30|| form.planState == 40)&& formPage != 'sale'" @click="showDialogVisible('修改司机信息')">修改司机信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40"  @click="showPrint">打印单据</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 30 && form.isNeedCheck==1 && formPage != 'sale'" @click="showDialogVisible5">确认出库</el-button>
             </span>
            <span v-if="form.planSendType == '自提'">
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30)&& formPage != 'sale'" @click="showCancelForm">取消排货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30 || form.planState == 40)&& formPage != 'sale'" @click="showDetail2" :disabled="form.planState == 40">修改提货信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30|| form.planState == 40)&& formPage != 'sale'" @click="showDialogVisible('修改司机信息')">修改司机信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40"  @click="showPrint">打印单据</el-button>
                <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 30 && form.isNeedCheck==1&& formPage != 'sale'" @click="showDialogVisible5">确认出库</el-button>
             </span>
        </span>

        <!--采购排货-->
        <span v-if="form.billType == 'purchaseOrder'">
            <el-button style="margin-left:0" type="primary" size="small"  v-if="form.planState == 0 && formPage != 'sale'" @click="showDialogVisible('物流确认发货')">物流确认发货</el-button>
            <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 0 || form.planState == 25 || form.planState == 30 || (form.planState == 40 && form.planSendType == '运联发货'))&& formPage != 'sale'" @click="showCancelForm">取消排货</el-button>
            <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 10 && formPage != 'sale'" @click="cancelDeliver">取消发货</el-button>
            <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30 || form.planState == 40)&& formPage != 'sale'" @click="showDetail2" :disabled="form.planState == 40">修改提货信息</el-button>
            <el-button style="margin-left:0" type="primary" size="small" v-if="(form.planState == 25 || form.planState == 30|| form.planState == 40)&& formPage != 'sale'" @click="showDialogVisible('修改司机信息')">修改司机信息</el-button>
            <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40"  @click="showPrint">打印单据</el-button>
            <el-button style="margin-left:0" type="primary" size="small" v-if="form.planState == 30&& formPage != 'sale'" @click="confirmWarehousing">确认入库</el-button>
        </span>
<!--        <el-button style="margin-left:0" type="primary" size="small" @click="showbackForm">回退</el-button>-->
      </div>


      <!--所有按钮-采购-->
      <div style="margin-top:20px;" v-if="userType=='pums'">
        <!--销售排货-->
        <span v-if="form.billType == 'saleOrder'">
           <span v-if="form.planSendType == '运联发货'">
                <el-button style="margin-left:0" type="primary" size="small" @click="showCancelForm" v-if="form.planState == 0">取消排货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDetail2" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40" :disabled="form.planState == 40">修改提货信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDialogVisible('修改司机信息')" v-if="form.planState == 30 || form.planState == 40">修改司机信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDialogVisible5" v-if="form.planState == 30&& form.isNeedCheck==1">确认出库</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showPrint" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40">打印单据</el-button>
           </span>

          <span v-if="form.planSendType == '工厂发货'">
                <el-button style="margin-left:0" type="primary" size="small" @click="showCancelForm" v-if="form.planState == 30 || form.planState == 40">取消排货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDetail2" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40" :disabled="form.planState == 40">修改提货信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDialogVisible('修改司机信息')" v-if="form.planState == 30 || form.planState == 40">修改司机信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDialogVisible5" v-if="form.planState == 30 && form.isNeedCheck==1">确认出库</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showPrint" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40">打印单据</el-button>
           </span>

          <span v-if="form.planSendType == '自提'">
                <el-button style="margin-left:0" type="primary" size="small" @click="showCancelForm" v-if="form.planState == 20 || form.planState == 30 || form.planState == 40">取消排货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDetail2" v-if="form.planState == 30 || form.planState == 40" :disabled="form.planState == 40">修改提货信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDialogVisible('修改司机信息')" v-if="form.planState == 20 || form.planState == 30 || form.planState == 40">修改司机信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDialogVisible5" v-if="form.planState == 30 && form.isNeedCheck==1">确认出库</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showPrint" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40">打印单据</el-button>
           </span>
        </span>
        <!--采购排货-->
        <span v-if="form.billType == 'purchaseOrder'">
               <el-button style="margin-left:0" type="primary" size="small" @click="showCancelForm" v-if="form.planState == 0">取消排货</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDetail2" v-if="form.planState == 30 || form.planState == 40" :disabled="form.planState == 40">修改提货信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showDialogVisible('修改司机信息')" v-if="form.planState == 30 || form.planState == 40">修改司机信息</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="confirmWarehousing" v-if="form.planState == 30 ">确认入库</el-button>
                <el-button style="margin-left:0" type="primary" size="small" @click="showPrint" v-if="form.planState == 25 || form.planState == 30 || form.planState == 40">打印单据</el-button>
        </span>

      </div>

    </div>

    <div style="margin-top: 20px;clear: both">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">操作记录</span>
    </div>
    <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in form.logList"
          :key="index">
          <span><span style="padding-right:10px;">{{activity.logTime}}</span>{{activity.logUserName}}：{{activity.logContent}} </span>
        </el-timeline-item>
      </el-timeline>
      <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="form.logList && form.logList.length == 0">- 暂无数据 -</div>
    </div>


    <!--修改提货信息-->
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      :beforeClose="handleClose2"
      title="修改提货信息"
      :visible.sync="dialogVisible2"
      width="900px">
      <el-form :model="takeForm" size="mini" label-width="120px"  ref="takeForm" :rules="rules2">
        <el-form-item label="供应商：">
            <el-select
              clearable
              v-model="takeForm.supplierId"
              filterable
              reserve-keyword
              placeholder="请输入关键词">
              <el-option
                v-for="item in options3"
                :key="item.supplierId"
                :label="item.supplierName"
                :value="item.supplierId">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="合同公司：" prop="fromCompany">
          <el-select v-model="takeForm.fromCompany">
              <el-option value="常州普利成" label="常州普利成" key="常州普利成"></el-option>
              <el-option value="塑盟科技集团有限公司" label="塑盟科技集团有限公司" key="塑盟科技集团有限公司"></el-option>
              <el-option value="上海泛塑" label="上海泛塑" key="上海泛塑"></el-option>
              <el-option value="华灯车尚" label="华灯车尚" key="华灯车尚"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提货时间：" prop="takeTime">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="takeForm.takeTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发同批次同产线："  prop="isSameBatch">
          <el-radio-group v-model="takeForm.isSameBatch">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提货备注：">
          <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" style="width:400px"  v-model.trim="takeForm.takeRemark"></el-input>
        </el-form-item>
        <div>商品信息</div>
        <el-table
          ref="orderItemTable"
          :data="takeForm.detailList"
          style="margin-top: 20px;box-sizing: border-box;width:1071px" border>
          <el-table-column label="商品名称" min-width="150">
            <template slot-scope="scope">
              <el-form-item label-width="0">
                {{scope.row.goodsName}}
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="包装" min-width="180"  align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`detailList.${scope.$index}.goodsWeight`" :rules="rules2.goodsWeight">
                <el-input style="width:100px" v-model="scope.row.goodsWeight"></el-input><span style="padding-left:5px">kg/包</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="提货数量（吨）" min-width="130" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`detailList.${scope.$index}.planNum`" :rules="rules2.planNum">
                <el-input style="width:100px" v-model="scope.row.planNum" ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="是否含托" min-width="130" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0">
                <el-checkbox v-model="scope.row.isHasTray">是</el-checkbox>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="150" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0">
                <el-input  v-model="scope.row.goodsRemark" ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改包装-->
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      :beforeClose="handleClose4"
      title="修改包装"
      :visible.sync="dialogVisible4"
      width="300px">
      <el-form :model="weightForm" size="mini" label-width="100px"  ref="weightForm" :rules="rules4">
        <el-form-item label="商品包装：" prop="goodsWeight">
          <el-input style="width:100px" v-model="weightForm.goodsWeight"></el-input><span style="padding-left:5px">kg</span>
        </el-form-item>
        <el-form-item label="是否含托：">
          <el-checkbox v-model="weightForm.isHasTray">是</el-checkbox>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose4">取 消</el-button>
          <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4">确 定</el-button>
      </span>
    </el-dialog>

    <!--回退-->
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      :beforeClose="handleClose7"
      title="回退"
      :visible.sync="dialogVisible7"
      width="500px">
      <el-form :model="backForm" size="mini" label-width="100px"  ref="backForm" :rules="rules7">
        <el-form-item label="回退原因：" prop="remark">
          <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model.trim="backForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose7">取 消</el-button>
          <el-button type="primary" @click="handleConfirm7" :loading="btnLoading7">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {formatDate} from '@/utils/date';
import store from '@/store'
import {getTakeInfo,addOrderTakeOrder,postTakeOrderOrderProcess,getPrintContentakeOrder,changeTakeInfo,planGoodsOperate,getDeliverGoods} from '@/api/partner'
import "@/utils/jQuery.print"
import sendGoods from '@/views/components/sendGoods';
import {validateCommission} from '@/utils/validate';
import {goodsPlanBack, inputDriverInfo, planGoodsEdit, planGoodsInfo,getUserOption,supplierList} from "../../api/partner";
import {planBillInfo,editPlanGoods} from "@/api/order"


const defaultTakeForm={
  "billId" : '',  //排货单ID
  "supplierId" : "", //供应商ID
  "fromCompany" : "", //合同公司
  "takeTime" : "", //提货时间
  "takeRemark" : "原厂正牌，原料生产日期不超过合同签订日前六个月，外观无破损、潮湿，无大面积污渍，包装袋规格及颜色一致。", //提货备注
  detailList:[],
  isSameBatch:'',

};

const defaultBackForm={
  billId:'',
  "remark" : "", //取消原因
}

export default {
  name: "dischargingInfo",
  data(){
    const isvalidateCommission = (rule, value, callback) => {
      if (!validateCommission(parseFloat(value))) {
        callback(new Error('非负整数或小数'))
      } else if(value > 99999999){
        callback(new Error('最大值为99999999'))
      }else {
        callback()
      }
    };
    return{
      loading:false,
      tOrderId:this.$route.query.tOrderId,
      orderInfo:{},
      dialogVisible:false,
      form: {},
      remark:'',
      checked:false,


      dialogVisible2:false,
      btnLoading2:false,
      takeForm: JSON.parse(JSON.stringify(defaultTakeForm)),
      rules2:{
        fromCompany:[{required: true, trigger: 'change' ,message: '此项必填',}],
        takeTime:[{required: true, trigger: 'change' ,message: '此项必填',}],
        goodsWeight:[{required: true, trigger: 'blur' ,message: '此项必填',}],
        planNum:[{required: true, trigger: 'blur' ,message: '此项必填',}],
        isSameBatch:[{required: true, trigger: 'change' ,message: '此项必填',}],
      },

      weightForm:{
        goodsWeight:'',
        isHasTray:false
      },
      btnLoading4:false,
      rules4:{
        goodsWeight:[{required: true, trigger: 'blur' ,message: '此项必填',}],
      },
      dialogVisible4:false,


      btnLoading7:false,
      dialogVisible7:false,
      backForm:JSON.parse(JSON.stringify(defaultBackForm)),
      rules7:{
        remark:[{required: true, trigger: 'blur' ,message: '此项必填',}],
      },

      billId:'',
      options3:[],
      formPage:''
    }
  },

  props:{
    userType:''
  },

  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    newTime() {
      let date = new Date();
      return formatDate(date, 'yyyy年MM月dd日')
    },
  },
  components : {
    sendGoods:sendGoods,
  },

  filters: {
    fifBillType(val){
      if(val == 'saleOrder'){
        return '销售单'
      }else if(val == 'purchaseOrder'){
        return '采购单'
      }else if(val == 'agentProcess'){
        return '代加工单'
      }
    },

    fiferfinanceState(val){
      if(val == 0){
        return '未审核'
      }else if(val == 1){
        return '已审核'
      }else if(val == 2){
        return '已关闭'
      }
    },

    formatTime(time) {
      if(time){
        let date = new Date(time);
        return formatDate(date, 'yyyy年MM月dd日')
      }
    },

    fifplanState(val){
      if(val == 0){
        return '待物流发货'
      }else if(val == 10){
        return '发货中'
      }else if(val == 20){
        return '待安排司机'
      }else if(val == 25){
        return '待提货'
      }else if(val == 30){
        return '待出库'
      }else if(val == 40){
        return '已出库'
      }else if(val == 5){
        return '已取消'
      }
    },
  },
  methods:{
    //供应商
    getSupplierList() {
      supplierList().then((res)=>{
        this.options3 = res;
      })
    },

    //物流发货
    showSendGoods(){
      this.$emit('showSendGoods',this.form);
    },

    //物流确认发货
    showDialogVisible(title){
      this.$emit('showDialogVisible4',this.form,title);
    },

    //取消排货
    showCancelForm(){
      console.log("billId",this.form.billId)
      this.$emit('showCancelForm',this.form.billId);
    },

    //取消发货
    cancelDeliver(){
      this.$emit('cancelDeliver',this.form);
    },

    //打印单据
    showPrint(){
      this.$emit('showPrint',this.form,this.checked);
    },

    //确认出库
    showDialogVisible5(){
      this.$emit('showDialogVisible',this.form);
    },

    //确认入库
    confirmWarehousing(){
      this.$emit('confirmWarehousing',this.form);
    },

    showbackForm(){
      this.dialogVisible7 = true;
    },
    handleClose7(){
      this.dialogVisible7 = false;
    },
    handleConfirm7(){
      this.$refs.backForm.validate((valid) => {
        if (valid) {
          this.btnLoading7 = false;
          let data = JSON.parse(JSON.stringify(this.backForm));
          data.billId = this.form.billId;
          goodsPlanBack(data).then(response => {
            this.btnLoading7 = false;
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.handleClose7()
            this.$emit('refresh',this.form.billId)
          }).catch(() => {
            this.btnLoading7 = false;
          })
        }
      })
    },

    //显示修改包装
    showPop4(){
      this.dialogVisible4 = true;
      this.weightForm.goodsWeight = this.form.goodsWeight;
      this.weightForm.isHasTray = this.form.isHasTray == 1 ? true : false;
    },

    //关闭修改包装
    handleClose4(){
      this.dialogVisible4 = false;
    },

    //提交修改包装
    handleConfirm4(){
      this.$refs.weightForm.validate((valid) => {
        if (valid) {
          this.btnLoading4 = false;
          let data = JSON.parse(JSON.stringify(this.weightForm));
          data.isHasTray = data.isHasTray ? 1 : 0;
          data.billId = this.form.billId;
          planGoodsEdit(data).then(response => {
            this.btnLoading4 = false;
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.handleClose4()
            this.$emit('refresh',this.form.billId)
          }).catch(() => {
            this.btnLoading4 = false;
          })
        }
      })
    },

    //显示修改提货信息
    showDetail2(){
      this.dialogVisible2 = true;
      this.takeForm =  JSON.parse(JSON.stringify(defaultTakeForm));
      this.takeForm.billId = this.form.billId;
      this.takeForm.supplierId = this.form.supplierId ? this.form.supplierId : '';
      this.takeForm.fromCompany = this.form.fromCompany;
      this.takeForm.takeTime = this.form.takeTime;
      this.takeForm.isSameBatch = this.form.isSameBatch;
      this.takeForm.detailList = [];
      this.form.takeGoodsList.forEach((el)=>{
        this.takeForm.detailList.push({
          pbgId:el.pbgId,
          goodsName:el.goodsName,
          planNum:el.planNum,
          goodsWeight:el.goodsWeight,
          isHasTray:el.isHasTray == 1,
          goodsRemark:el.goodsRemark})
      })
      this.takeForm.takeRemark = this.form.takeRemark == '' ? '原厂正牌，原料生产日期不超过合同签订日前六个月，外观无破损、潮湿，无大面积污渍，包装袋规格及颜色一致。' : this.takeForm.takeRemark

    },

    //关闭修改提货信息
    handleClose2(){
      this.dialogVisible2 = false;
    },

    //提交修改提货信息
    handleConfirm2(){
      this.$refs['takeForm'].validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.takeForm))
          data.detailList.forEach((el)=>{
            el.isHasTray = el.isHasTray ? 1 : 0;
          })
          editPlanGoods(data).then(()=>{
            this.btnLoading2 = false;
            this.handleClose2();
            this.$emit('refresh',this.form.billId)
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })

    },


    //去订单详情页
    toDetail(){
      let routeData = this.$router.resolve({name:'purchaseDetail',query:{id:this.form2.saleOrderId,type:'see'}});
      window.open(routeData.href);
    },

    //获取排货详情
    getOrderInfo(){
      planBillInfo({billId:this.billId}).then((res)=>{
        this.form = res;
      }).catch((err)=>{
      })
    },

    //获取排货详情
    init(billId,formPage){
      this.billId = billId;
      console.log("formPage",formPage)
      this.formPage = formPage;
      this.getOrderInfo();
      this.getSupplierList()
    },
  }
}
</script>

<style  lang="scss" scoped>
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
}
.detail-form{
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom:0px;
  }
}

.detail-container {
  width: 90%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
  .el-card__header{
    background: #f8f8f8;
    .kehu-name{
      display: inline-block;
      font-size:14px;
      vertical-align: middle;
    }
    .kehu-label{
      font-size:12px;
      vertical-align: middle;
      display: inline-block;
      margin-left:15px;
      color: #409eff;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      height:24px;
      line-height: 24px;
      padding:0 10px;
      border-radius: 5px;
    }
    .kehu-info{
      text-align: right;
      font-size: 12px;
      color:#333;
      line-height: 20px;
      span{
        padding-left:16px;
      }
    }
  }
  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }
}
.price-block{
  font-size:12px;
  line-height:30px;
  .lab{
    display: inline-block;
    width:100px;
    text-align: right;
  }
  .text{
    display: inline-block;
  }
}
#print-div{
  font-size:14px;
  font-family: "Microsoft YaHei";
  color:#000;
  .title{
    font-size:28px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
  }
  .paper-top{
    margin-top:20px;
    line-height: 20px;
  }
  .good-table{
    margin-top:0px;
    table{
      border-left:1px solid #aaa;
      border-bottom:1px solid #aaa;
      td,th{
        font-weight: normal;
        border-right:1px solid #aaa;
        border-top:1px solid #aaa;
        padding:5px 10px;
        line-height: 20px;
      }
    }
  }
  .paper-bottom{
    margin-top:0px;
    line-height: 20px;
  }
  .tihuotable{
    border-left:1px solid #aaa;border-bottom:1px solid #aaa;
    td{
      height: 40px;
    }
    .td-div{
      line-height: 18px;
    }
    .th{
      border-top:1px solid #aaa;background: #f2f2f2;white-space:nowrap;width:160px;
    }
  }
}
</style>
